<!--评论组件，是个子组件-->
<template>
    <div id="teml">
        <div id="postComment">
            <h4>提交评论</h4>
            <p></p>
            <textarea placeholder="请输入您要评论的内容..." v-model="content"></textarea>
            <mt-button size="large" type="primary" @click="postContent">提交</mt-button>
        </div>
        <p></p>
        <!--评论列表-->
        <div id="getContent">
            <h4>评论列表</h4>
            <ul>
                <li v-for="(item,index) in list">
                    <p></p>
                    <span>第{{index+1}}楼</span>:<span>{{item.user_name}}</span> &nbsp <span>{{item.add_time | timeFormat('YYYY-MM-DD')}}</span>
                    <div>{{item.content}}</div>
                    <br>

                </li>
            </ul>
        </div>
        <!--点击加载跟多数据-->
        <mt-button type="default" size="large" @click="click">点击加载更多</mt-button>
    </div>
</template>

<script>
  //引入公共地址
  import common from '../../kits/common.js';
  //引入弹出框插件
  import {Toast} from 'mint-ui';
  export default{
    props: ['id'], //作用，用来接收父组件传入的数据
    data(){
      return {
        pageindex:1,
        content: '',
        list: []
      }
    },
    created(){
      this.getContent(this.pageindex);
    },
    methods: {
      postContent(){
//        将评论内容提交到数据库的地址
        var url = common.apidomain + '/api/postcomment/' + this.id;
        this.content = this.content.trim();
        if (this.content != '') {
//        挑用ajax请求发送评论的内容
          this.$http.post(url, {content: this.content}, {emulateJSON: true}).then(function (response) {
//          数据提交成功提示
            Toast(response.body.message);
            // 将提交的数据立即渲染到页面
//            将输入添加到list数据中的第一项，unshift，
//            在改变list的值的时候vue会重新渲染
            this.list.unshift({
              user_name:"匿名用户",
              add_time:new Date(),
              content:this.content
            });
//          数据提交成功后清空
            this.content = '';

          });
        } else {
          Toast('内容不能为空');
          return;
        }
      },
      getContent(pageindex){
        //pageindex 表示获取评论的页数
         pageindex = pageindex || 1 ;
        var url = common.apidomain + '/api/getcomments/' + this.id + '?pageindex='+pageindex;
        this.$http.get(url).then(function (response) {
          this.list = this.list.concat(response.body.message);
        })
      },
//      点击加载跟多数据
      click(){
        this.pageindex++;
        this.getContent(this.pageindex);
      }
    }
  }
</script>

<style scoped>
    p {
        width: 100%;
        height: 1px;
        margin-top: 5px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    }

    #postComment, #getContent {
        padding: 5px;
    }

    ul {
        padding-left: 0;
    }

    li {
        list-style: none;
    }

    #getContent span {
        color: rgba(0,0,0,0.7);
    }
</style>